<template>
	<view>
		<view class="bookshelf">
			<!-- 轮播图标题 -->
		      <view class="title">
		        <u-row gutter="0" class="flex-wrap">
					<u-col span="7"><text>Find Professionals</text></u-col>
					<u-col span="2"><view style="color: #000000;">.</view></u-col>
					<u-col span="3">
						<view class="scroll-see"
						 @click="seeall"
						 margin-right="20rpx"
						 >See All
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-col>
				</u-row>
		      </view>
			  <!-- 滚动轮播图 -->
		      <scroll-view scroll-x="true" class="bookshelf-content">
		        <block v-for="(item,index) in list" :key="index">
					
		          <view class="item" @click="itemclick(index)">
		            <view class="img">
		              <image :src="item.img" mode="aspectFill"></image>
		            </view>
					<view class="text">
						<text class="item-title text-over-1">{{item.text}}</text>
					</view>
		          </view>
				  
		        </block>
		      </scroll-view>
		    </view>
	</view>
</template>

<script>
	import uRow from "@/uviewui/components/u-row/u-row.vue"
	import uCol from "@/uviewui/components/u-col/u-col.vue"
	export default {
		name:"hscroll",
		components:{
			uRow,
			uCol
		},
		props:['list'],
		data() {
			return {
				
			};
		},
		methods:{
			//seeall点击事件
			seeall(){
				console.log('seeall')
			},
			//item点击事件
			itemclick(index){
				console.log(index)
			}
		}
	}
</script>

<style lang="scss">
	
	.title{
		padding-left: 20rpx;
		font-weight: 800;
		font-size: 34rpx;
		.scroll-see{
			color: #02CFAC;
		}
	}
.bookshelf {
	// background-color: #FFFFFF;
      // margin-top: 540rpx;
	  .title{
		  margin-top: 20rpx;
		  color: #FFFFFF;
		  font-weight: 700em;
	  }
      .bookshelf-content {
        white-space: nowrap; // 滚动必须加的属性
        width: 100%;
        // height: 290rpx;
        padding: 20rpx;
        margin: 0 auto;
        .item {
          width: 30%;
          margin-right: 20rpx;
          display: inline-block;
          vertical-align: top;
          .img {
            display: inline-block;
            image {
              width: 226rpx;
			  // width:100%
              height: 220rpx;
              border-radius: 6rpx;
            }
          }
          .item-title {
            display: block; // 让字体换行
            width: 90%;
            font-size: 30rpx;
            line-height: 40rpx;
			color: #FFFFFF;
			text-align: center;
          }
		  .text{
			height: 80rpx;
			padding: 20rpx;
			background-color: #2C292C;
		  }
        }
      }
    }
</style>
